<template>
  <div class="playsong">
    <div class="main">
      <!-- 歌去显示区域 -->
      <div class="song_info">
        <div class="song_info_hd">
          <h1
            class="song_name"
            v-text="songName"
          ></h1>
          <h2
            class="sing_name"
            v-text="singName"
          ></h2>
        </div>
        <div class="song_info_cnt">
          <div class="album_box__img">
            <img
              :src="songImgUrl"
              alt=""
            >
          </div>
          <div class="album_box__lyric"></div>
        </div>
      </div>
      <!-- 歌曲播放区域 -->
      <div class="opt">
        <div
          class="play"
          @click="autoPlay"
        >
          <audio
            :src="songLyric"
            id="myaudio"
            controls="controls"
            hidden="true"
            ref="player"
            @timeupdate="myFunction"
          >
          </audio>
          <van-icon
            v-if="isautoPlay"
            name="pause-circle-o"
            color="#22d59c"
          />
          <van-icon
            v-else
            name="play-circle-o"
          />
        </div>
        <div class="love">
          <van-icon name="smile" />
        </div>
      </div>
      <!-- 歌词区域 -->
      <div class="gengci-box">
        <ul
          class="gengci_con"
          id="gengci_con"
          ref='ul'
        >
          <li
            v-for="(item,index) in medisArray"
            :key="index"
            v-text="item.c"
          ></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
//弹框提示
import { Toast } from 'vant';
export default {
  data: () => ({
    mid: null,
    pmid: null,
    singName: '',
    songName: '',
    songInfo: {},
    songImgUrl: '',
    songLyric: '',
    songVKey: '',
    isautoPlay: false,
    medisArray: [],
    fraction: 0.5,
    topNum: 0,
    lineNo: 10
  }),
  created() {
    this.mid = this.$router.history.current.params.mid
    this.getSongInfoR(this.mid)
    this.getMusicVKeyR(this.mid)
    this.getLyricR(this.mid)
  },
  methods: {
    //获取歌曲详情
    async getSongInfoR(mid) {
      const res = await this.$http.getSongInfoR(mid)
      this.songInfo = res.data.response.songinfo.data
      this.pmid = this.songInfo.track_info.album.pmid
      this.songName = this.songInfo.track_info.title
      this.singName = this.songInfo.track_info.singer[0].name
      this.getImageUrlR(this.pmid)
      // console.log(this.songInfo)
    },
    //获取歌曲图片 需要通过pmid获取
    async getImageUrlR(pmid) {
      const res = await this.$http.getImageUrlR(pmid)
      // console.log(res.data.response.data.imageUrl)
      this.songImgUrl = res.data.response.data.imageUrl
    },
    //获取歌曲歌词
    async getLyricR(mid) {
      const res = await this.$http.getLyricR(mid)
      // console.log(res.data.response.lyric)
      this.songVKey = res.data.response.lyric

      this.createLrc(this.songVKey)
    },
    //获取歌曲播放音频
    async getMusicVKeyR(mid) {
      const res = await this.$http.getMusicVKeyR(mid)
      this.songLyric = res.data.response.playLists[0]
      // console.log(this.songLyric)
    },
    //播放音乐
    autoPlay() {
      this.isautoPlay = !this.isautoPlay
      if (this.isautoPlay) {
        this.$refs.player.play()
        Toast({
          message: '开始播放',
          position: 'bottom',
        });
        // 监听audio是否播放完
        this.$refs.player.addEventListener('ended', function () {
          console.log(1)
          this.isautoPlay = !this.isautoPlay
          //监听到播放结束后，在此处可调用
        }, false);
      } else {
        this.$refs.player.pause()
        Toast({
          message: '暂停',
          position: 'bottom',
        });
      }
    },
    //歌词拆分
    createLrc(medis) {
      var medises = medis.split("\n");    // 用换行符拆分获取到的歌词
      // console.log(medises)
      medises.forEach(item => {
        var t = item.substring(item.indexOf("[") + 1, item.indexOf("]"));
        this.medisArray.push({
          t: (t.split(":")[0] * 60 + parseFloat(t.split(":")[1])).toFixed(3),
          c: item.substring(item.indexOf("]") + 1, item.length)
        })
      })
      this.medisArray.splice(0, 5)
      // console.log(this.medisArray)
      // console.log(this.$refs.ul)
    },
    //歌词滚动
    lineHeight() {
    },
    //播放监听
    myFunction() {
      console.log(1)
    }
  }
}
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.playsong {
  padding: 44px 0px 50px;
  .main {
    .song_info {
      margin-bottom: 10px;
      .song_info_hd {
        text-align: center;
        color: grey;
        .song_name {
          color: #000;
          font-size: 22px;
          font-weight: 400;
          overflow: hidden;
          padding: 20px 0 5px;
        }
        .sing_name {
          font-size: 14px;
          font-weight: 300;
          overflow: hidden;
          padding-bottom: 10px;
        }
      }
      .song_info_cnt {
        height: 182px;
        position: relative;
        .album_box__img {
          width: 182px;
          height: 182px;
          position: absolute;
          top: 0;
          left: 50%;
          z-index: 2;
          margin-left: -91px;
          overflow: hidden;
          border-radius: 12px;
          box-shadow: 0 7px 13px rgba(0, 0, 0, 0.23);
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .opt {
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 45px;
      color: grey;
      user-select: none;
      .play {
        margin-right: 56px;
      }
    }
    // 歌词
    .gengci-box {
      padding: 10px 30px;
      overflow: hidden;
      .gengci_con {
        text-align: center;
        height: 200px;
        overflow-y: auto;
      }
      /*自定义滚动条的伪对象选择器, CSS 可以隐藏滚动条*/
      .gengci_con::-webkit-scrollbar {
        display: none;
      }
    }
  }
}
</style>